/**
 * Created by FreezeSoul on 2017/9/5.
 */
define([
    "app/core/base",
    "app/core/util",
    "jquery",
    "underscore",
    'JSONParse',
    'loglevel',
    'adConfig',
    'iziModal',
    'css!app/plugins/controls/common/areapop/resource/style.css'
], function (Chart, Util, $, _, JSON, log, adConfig) {

    var property = {
        config: "property",
        option: [
            {
                group: '基础',
                id: 'Control_Describe',
                name: '描述说明',
                enable: true,
                type: 'text',
                value: '',
                default: '',
                link: 'describe',
                tooltip: '控件描述说明'
            },
            {
                group: '基础',
                id: 'AreaPop_ZoomSize',
                name: '放大尺寸',
                enable: false,
                type: 'number',
                value: 1,
                default: 1,
                link: 'zoomSize',
                tooltip: '放大尺寸'
            },
            {
                group: '基础',
                id: 'AreaPop_FullHeight',
                name: '撑满高度',
                enable: false,
                type: 'checked',
                value: false,
                default: false,
                link: 'fullHeight',
                tooltip: '撑满高度，设置此属性后放大尺寸失效'
            },
            {
                group: '基础',
                id: 'AreaPop_OffsetTop',
                name: '顶部偏移',
                enable: false,
                type: 'number',
                value: 0,
                default: 0,
                link: 'offsetTop',
                tooltip: '顶部偏移'
            },
            {
                group: '基础',
                id: 'AreaPop_Background',
                name: '背景图片',
                enable: true,
                type: 'resource',
                value: '',
                default: '',
                link: 'background',
                tooltip: '设置背景图片的资源路径'
            },
            {
                group: '事件',
                id: 'AreaPop_Opening',
                name: '弹出中事件',
                enable: false,
                type: 'script',
                value: '',
                default: '',
                link: 'openingScript',
                tooltip: '弹出中事件，可定制复杂的JS操作'
            },
            {
                group: '事件',
                id: 'AreaPop_Opened',
                name: '弹出打开事件',
                enable: false,
                type: 'script',
                value: '',
                default: '',
                link: 'openedScript',
                tooltip: '弹出打开事件，可定制复杂的JS操作'
            },
            {
                group: '事件',
                id: 'AreaPop_Closed',
                name: '弹出关闭事件',
                enable: false,
                type: 'script',
                value: '',
                default: '',
                link: 'closedScript',
                tooltip: '弹出关闭事件，可定制复杂的JS操作'
            }
        ],
        MapOption: function (option) {
            Util.linkOption(this.option, option);
        }
    };

    var pop = Chart.extend({
        constructor: function (layout) {
            this._layout = layout;
            this._element = null;
            this._container = null;
            this._modalId = "modal-" + Util.newUUID();
            //this._backgoundImg = null;
            this._option = {
                Series: [],
                Events: [],
                Extend: $.extend(true, {}, property),
                Option: {
                    describe: "",
                    background: "",
                    zoomSize: 1,
                    offsetTop: 0,
                    fullHeight: false,
                    openingScript: '',
                    openedScript: '',
                    closedScript: ''
                }
            };
        },
        init: function (element) {
            try {
                this._container = element;
            } catch (e) {
                log.error(e);
            }
        },
        _readProperty: function () {
            try {
                if (!this._option.Extend) return;
                Util.deepMapOption(property, this._option.Extend, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        _render: function () {
            var _this = this;
            $("#" + this._modalId).remove();
            $(this._container).empty();
            var resizeWidth = 32;
            var resizeHeight = 32;
            var offsetTop = this._option.Option.offsetTop === undefined ? 0 : this._option.Option.offsetTop;
            var $container = $(this._container).parent().parent();
            var zoomSize = this._option.Option.zoomSize === undefined ? 1 : this._option.Option.zoomSize;
            var containerTop = $container.offset().top;
            var containerLeft = $container.offset().left;
            var containerWidth = $container.width();
            var containerHeight = $container.height();
            if (this._option.Option.fullHeight) {
                zoomSize = $(document).height() / $container.height();
            }
            var zoomContainerWidth = containerWidth * zoomSize;
            var zoomContainerHeight = containerHeight * zoomSize;
            var $maximizeBtn = $("<img src='app/plugins/controls/common/areapop/images/maximize.png' style='width:32px;height:32px;position: absolute;right: 0;opacity: 0.1;'/>");
            $maximizeBtn.appendTo(this._container);
            if (this._layout.__isEditMode || this.__isEditMode) {
                return;
            }
            var imageTop = $maximizeBtn.offset().top;
            var imageLeft = $maximizeBtn.offset().left;
            $container.width(resizeWidth).height(resizeHeight).css({top: imageTop, left: imageLeft});
            var rootPath = "static/resource/";
            var imageUrl = adConfig.baseServiceUrl + rootPath + this._option.Option.background;
            if ($("#dashboard-container").css("background-image") === "none") {

                $("#dashboard-container").css({
                    "background-image": "url(" + imageUrl + ")",
                    "background-repeat": "no-repeat"
                });

            }
            //this._backgoundImg = "<img class='areapop_background' src='" + imageUrl + "'/>";
            //Util.preloadImages([imageUrl], false);
            $maximizeBtn.click(function () {
                _this._element.iziModal('destroy');
                _this._element.iziModal({
                    radius: 10,
                    width: containerWidth,
                    onOpening: function () {
                        _this._element.css({"opacity": 1});
                        var $content = $("#" + _this._modalId + " .iziModal-content");
                        var topOffset = -1 * (zoomContainerHeight - containerHeight) / 2;
                        var leftOffset = -1 * (zoomContainerWidth - containerWidth) / 2;
                        $content.height(containerHeight).width(containerWidth)
                            .css({
                                "position": "relative",
                                "background-color": "#000000",
                                "overflow": "hidden",
                                "zoom": zoomSize,
                                "margin-top": topOffset + offsetTop,
                                "margin-left": leftOffset
                            });
                        //$(_this._backgoundImg).appendTo($("#dashboard-container"));
                        $(".layout-editor").css({
                            "left": -1 * containerLeft,
                            "top": -1 * containerTop
                        }).appendTo($content);
                        $maximizeBtn.hide();

                        if (_this._option.Option
                            && _this._option.Option.openingScript) {
                            Util.evalJavaScript(_this, _this._option.Option.openingScript);
                        }
                    },
                    onOpened: function () {
                        if (_this._option.Option
                            && _this._option.Option.openedScript) {
                            Util.evalJavaScript(_this, _this._option.Option.openedScript);
                        }
                    },
                    onClosing: function () {
                        $maximizeBtn.show();
                        $(".layout-editor").css({"left": 0, "top": 0}).appendTo($("#dashboard-container"));
                    },
                    onClosed: function () {
                        _this._element.css({"opacity": 0});
                        //$("#dashboard-container .areapop_background").remove();
                        if (_this._option.Option
                            && _this._option.Option.closedScript) {
                            Util.evalJavaScript(_this, _this._option.Option.closedScript);
                        }
                    }
                });
                _this._element.iziModal('open');
            });
            var $element = $('<div id="' + this._modalId + '" class="areapop_div"></div>');
            $element.appendTo("body");
            $element.css({"opacity": 0});
            return $element;
        },
        example: function () {
            try {
                this._element = this._render();
            } catch (e) {
                log.error(e);
            }
        },
        setData: function () {
            try {
                this._readProperty();
                this._element = this._render();
            } catch (e) {
                log.error(e);
            }
        },
        setOption: function (option) {
            try {
                return this._option = $.extend(true, {}, option);
            } catch (e) {
                log.error(e);
            }
        },
        getOption: function () {
            try {
                this._readProperty();
            } catch (e) {
                log.error(e);
            }
            return this._option;
        },
        setTheme: function (theme) {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        resize: function () {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        showLoading: function () {
            try {
                if (this._layout && this._layout.showLoading) {
                    this._layout.showLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        hideLoading: function () {
            try {
                if (this._layout && this._layout.hideLoading) {
                    this._layout.hideLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        dispose: function () {
            try {
                $("#dashboard-container").css({"background-image": "none"});
                $(this._element).off().remove();
            } catch (e) {
                log.error(e);
            }
        },
        getElement: function () {
            return this._element;
        },
        getChart: function () {
            return this._element;
        }
    });

    return {
        Chart: pop,
        Property: property
    };
});